<template>
  <div class="banner-page" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="red">
      <p class="banner-page__title">{{ modelValue?.data?.title }}</p>
    </div> 
    <div class="orange"></div> 
    <div class="position-absolute triangle-position">
      <div class="position-relative h-100 banner-strips">
        <img src="https://ywies-tx.cedim.cn/images/material/banner-strips.png" alt=""> 
        <div class="triangle" :style="{backgroundImage: 'url(' + modelValue?.data?.imgSrc + ')'}" data-v-24231ec2=""></div>
      </div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'

// 定义组件名称
defineOptions({
  name: 'BannerPage'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'BannerPage',
    data: {
      title: '冷风机奥附件哦啊金佛阿吉佛大金佛电极法对哦就对哦就发哦就发哦激发激发哦飞机奥飞机',
      imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()
</script>

<style scoped>
.banner-page {
  height: 328px;
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .banner-page {
    height: 160px;
  }
}

.banner-page__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 8px 32px 0 rgba(130,130,140,.24);
  color: #fff;
  max-width: 357px;
  margin-left: 60px;
  z-index: 1;
}

@media (min-width: 768px) {
  .banner-page__title {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .banner-page__title {
    font-size: 40px;
    line-height: 1.25;
  }
}

@media (max-width: 1023.98px) {
  .banner-page__title {
    margin-left: 40px;
    width: 50%;
  }
}

@media (max-width: 575.98px) {
  .banner-page__title {
    margin-left: 22px;
  }
}

.banner-page .red {
  height: 100%;
  width: 50%;
  background-image: url('https://ywies-tx.cedim.cn/_nuxt/img/header-left-banner.c745bf5.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  display: flex;
  align-items: center;
}

.banner-page .red:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgba(235,0,40,.6);
}

@media (max-width: 767.98px) {
  .banner-page .red {
    width: 65%;
  }
}

.banner-page .orange {
  width: 50%;
  background-image: url('https://ywies-tx.cedim.cn/_nuxt/img/header-right-banner.6a0f5b9.jpg');
  background-position: 50%;
  position: relative;
}

.banner-page .orange,
.banner-page .orange:after {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.banner-page .orange:after {
  position: absolute;
  content: "";
  width: 100%;
  background-color: rgba(255,158,24,.6);
}

@media (max-width: 1440px) {
  .banner-page .orange {
    background-size: cover;
    background-position: 220px 50%;
  }
}

@media (max-width: 992px) {
  .banner-page .orange {
    background-position: 180px 50%;
  }
}

@media (max-width: 767.98px) {
  .banner-page .orange {
    width: 35%;
  }
}

@media (max-width: 575.98px) {
  .banner-page .orange {
    background-position: 18px 50%;
  }
}

.banner-page .triangle-position {
  position: absolute;
  top: 0;
  left: 66%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  max-width: 693px;
}

@media (min-width: 1441px) {
  .banner-page .triangle-position {
    left: 50%;
  }
}

.banner-page .banner-strips img {
  position: absolute;
  height: 100%;
  z-index: 1;
  right: 77%;
}

@media (max-width: 1023.98px) {
  .banner-page .banner-strips img {
    right: 65%;
  }
}

@media (max-width: 767.98px) {
  .banner-page .banner-strips img {
    right: 50%;
  }
}

@media (max-width: 375px) {
  .banner-page .banner-strips img {
    right: 49%;
  }
}

.banner-page .triangle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: 700px;
  transform: translateX(-50%);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--bg-image);
  -webkit-clip-path: polygon(0 0,100% 0,80% 100%,20% 100%);
  clip-path: polygon(0 0,100% 0,80% 100%,20% 100%);
}

@media (max-width: 1023.98px) {
  .banner-page .triangle {
    max-width: 600px;
    left: 53%;
    -webkit-clip-path: polygon(0 0,100% 0,72% 100%,25% 100%);
    clip-path: polygon(0 0,100% 0,72% 100%,25% 100%);
  }
}

@media (max-width: 767.98px) {
  .banner-page .triangle {
    max-width: 450px;
    left: 60%;
  }
}

@media (max-width: 575.98px) {
  .banner-page .triangle {
    max-width: 225px;
    left: 56%;
  }
}

.banner-page .triangle img {
  position: absolute;
}
</style>